import React, { useEffect, useRef } from "react";
import styled from "styled-components";
import Card from "@mui/material/Card";
import * as echarts from "echarts";
import setPeiChartOpt from "./piechartOpt";
import { connect } from "react-redux";
import {parseCategoryByTag} from './categoryByTag'
const StatisticWrapper = styled.div`
  .chart {
    height: 200px;
  }
`;
const DayChartList = (props: any) => {
  
  const initChart = (divRef: HTMLElement,optdata:{value: number,name: string}[],title:string) => {
    const _chart = echarts.init(divRef)
    const _opt = setPeiChartOpt(optdata === undefined ? [] : optdata,title)
    _opt && _chart.setOption(_opt)
  }
    const records = props.records;
  const optdata = parseCategoryByTag(records, 0)
  const optdata2 = parseCategoryByTag(records, 1);
  const outputRef = useRef(null);
  const inputRef=useRef(null)
     useEffect(() => {
       initChart(inputRef.current!, optdata2,'今日收入');
       initChart(outputRef.current!, optdata,'今日支出');
    })
    return <StatisticWrapper>
         <Card sx={{margin: "10px 10px",padding: "8px"}}>
        <div ref={ outputRef } className="chart"></div>
      </Card>
      <Card sx={{margin: "10px 10px",padding: "8px"}}>
        <div ref={ inputRef } className="chart"></div>
       </Card>
    </StatisticWrapper>
}
const mapStateToProps = (state: any) => {
    return { records: state.record };
  };
export default connect(mapStateToProps)(DayChartList) 